<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- <script src="../static/public/js/jquery.min.js" type="text/javascript"></script> -->
<!-- <link href="../static/css/demo01.css"  rel="stylesheet"  type="text/css"> -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<title>标签选择-易董</title>
<style type="text/css">
body{
    background: #fff !important;
    font-family: microsoft yahei,arial;
    color:#555;
}

.form_control{
    margin: 40px;
    width:600px;
    /*height: 38px;*/
    border: 1px solid #ccc;
    padding:5px;
    overflow: hidden;
}
.token{
    /*min-height: 20px;*/
    display: inline-block;
    border: 1px solid #d9d9d9;
    background-color: #ededed;
    /*margin-bottom:5px;*/
    padding:2px;
    margin-right: 4px;
}
.token_lable{}
.close{
    padding-left:5px;
    font-size: 16px;
    line-height: 20px;
    font-family:Helvetica,Arial;
      color:#666;
    text-decoration: none;
opacity:0.2;
}
.close:hover{
    opacity:0.8;
    text-shadow: 0 1px 0 #fff;
    font-size: 18px;
}
.token:hover{
   box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.token_input{
    width:220px;
    height: 24px;
    border:0;
    outline: none;
}

</style>
</head>
<body>
<div class="form_control">
    <input class="token_input" placeholder="最多输入5个标签,按回车键确定"></input>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
    //按回车键确定
    document.onkeydown = function (event) {
       var e = event || window.event || arguments.callee.caller.arguments[0];
        $text=$(".token_input").val();
        var $size=$(".token").size();
       if (e && e.keyCode == 13 & $text!="") {
        tag();
            if($size==5){
                    alert("最多输入5个标签");
            }

       };
   };

//添加新标签函数
function tag(){
 var $size=$(".token").size();
 $input=$(".token_input");
 if($size<5){
    var $text= $input.val();
    var $val="<div class='token'><span class='token_label'>"+$text+"</span><a href='javascript:void()' class='close'>x</a></div>"
    $input.before($val);
    $(".token_input").val("");
 }
};
//关闭按钮；
    $(".form_control").on('click', '.close', function bb(){
      $(this).parent().remove();
    });

});
</script>
</html>